<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form label-width="200px" v-if="dataInfo">
        <el-row>
          <el-form-item label="模板名称:">
            <span>{{ dataInfo.modelName }}</span>
          </el-form-item>
        </el-row>
        <div class="tit">
          <h2>模板数据</h2>
        </div>
        <el-row style="width: fit-content;">
          <el-table :data="btnModelRelations">
            <el-table-column label="模块类型" width="180" align="center">
              <template slot-scope="{row}">
                  <div>
                      {{ $Filters.formatModuleType(row.moduleType) }}
                  </div>
              </template>
            </el-table-column>
            <el-table-column label="标识图" align="center" width="140">
              <template slot-scope="{row}">
                  <el-image  :src="row.tagUrl" fit="cover" style="width: 120px; height:120px" alt="无"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="标识图底部边距" prop="bottomMargin" width="100"></el-table-column>
            <el-table-column prop="sort" label="排序" align="center" width="100"></el-table-column>
            <el-table-column label="banner图高度" prop="height" align="center">
             <template slot-scope="{row}">
              <div>
                  {{ row.moduleType==2?row.height:'#' }}
              </div>
             </template>
            </el-table-column>
            <el-table-column label="大图" align="center" width="200">
              <template slot-scope="{row}">
                  <el-image   :src="row.bigImgUrl" fit="cover" style="width: 120px; height:120px" alt="无"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="列表标题" prop="height" align="center" width="120">
             <template slot-scope="{row}">
              <div>
                  {{ row.moduleType==4?row.listTitle:'#' }}
              </div>
             </template>
            </el-table-column>
            <el-table-column label="列表布局" prop="styleType" align="center" width="130">
              <template slot-scope="{row}">
                <div v-if="row.moduleType==4">
                  {{row.styleType==1?'一行一列':'一行两列'}}
                </div>
                <span v-else>#</span>
              </template>
            </el-table-column>
            <el-table-column label="行列" align="center" width="100">
              <template slot-scope="{row}">
                  <div>
                      <el-button size="mini" plain type="success" v-if="row.moduleType==1" @click="showRowCol(row)">编辑</el-button>
                      <span v-else>#</span>
                  </div>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </div>

    <el-dialog :visible.sync="show" title="行列" center width="fit-content">
      <el-table :data="btnFormats" max-height="600">
        <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
          <el-table-column label="行" prop="row" width="100" align="center"></el-table-column>
          <el-table-column label="列" prop="col" width="100" align="center"></el-table-column>
          <el-table-column label="排序" prop="sort" width="100" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import BtnModelApi from "@/api/server/btnModel";
export default {
  data() {
    return {
      dataInfo: {},
      btnModelRelations: [],
      btnFormats:[],
      show:false,
    };
  },
  components: {
  },
  computed: {

  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      BtnModelApi.getBtnModel({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data;
        this.btnModelRelations = res.data.btnModelRelations;
      });
    },
    showRowCol(row){
      this.btnFormats = row.btnFormats
      this.show = true
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/server/btnModelManagement" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.img-video {
  width: 550px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
.business-classify_name {
  ::v-deep p {
    display: inline;
    margin: 0;
    img {
      vertical-align: middle;
      height: 16px;
      width: auto;
    }
  }
}
</style>
